<template>
    <header class="header">
      <div class="logo">Logo</div>
      <div class="avatar-container">
        <img class="avatar" :src="avatarUrl" alt="Profile Avatar" />
      </div>
    </header>
  </template>
  
  <script>
  export default {
    name: "HeaderComponent",
    data() {
      return {
        avatarUrl: "https://img2.baidu.com/it/u=2925226694,390810694&fm=253&fmt=auto?w=500&h=500", // 默认头像URL（可以替换为实际路径）
      };
    },
  };
  </script>
  
  <style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
  }
  
  .logo {
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .avatar-container {
    position: relative;
  }
  
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  /* 新增移动端适配 */
  @media (max-width: 768px) {
    .header {
      padding: 8px 15px;
    }
  
    .logo {
      font-size: 1em;
    }
  
    .avatar {
      width: 40px;
      height: 40px;
    }
  }
  
  @media (max-width: 480px) {
    .header {
      padding: 6px 10px;
    }
  
    .avatar {
      width: 35px;
      height: 35px;
    }
  }
  </style>